import { Button, Image, Modal, Space } from 'ant-design-vue'
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

import qzyApi from '@/apis/qzyApi'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { bus, optionsToMap } from '@/utils'

export default defineComponent({
  name: 'QzyCommunityManage',
  setup() {
    const sexOptions = [
      { label: '男', value: 0 },
      { label: '女', value: 1 }
    ]
    const deleteVisible = ref(false)
    const statusMap = optionsToMap(sexOptions)
    const tableRef = ref({} as ProTableRef)
    const tableConfig = ref<ProTableProps>({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        toolbarConfig: {
          perfect: false,
          slots: {
            buttons: 'toolbarButtons'
          }
        },
        proxyConfig: {
          form: true,
          props: {
            result: 'records',
            total: 'total'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await qzyApi.getQzyUserList({
                pageSize: page.pageSize,
                pageNo: page.currentPage,
                ...form
              })
              return data
            }
          }
        },
        formConfig: {
          items: [
            {
              title: '标题',
              field: 'content',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入标题'
                }
              }
            },
            {
              title: '发布者',
              field: 'content',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入发布者'
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 100,
          resizable: true
        },
        columns: [
          {
            title: '用户信息',
            slots: {
              default: 'avatar'
            }
          },
          {
            title: '标题',
            field: 'sex'
          },
          {
            title: '内容',
            field: 'weightLoss'
          },
          {
            title: '发布者',
            field: 'clockFrequencyOfThisMonth'
          },
          {
            title: '分享量',
            field: 'clockFrequencyOfThisMonth'
          },
          {
            title: '点赞量',
            field: 'clockFrequencyOfThisMonth'
          },
          {
            title: '发布时间',
            field: 'createTime',
            formatter: TABLE_FORMAT.Date
          },
          {
            title: '操作',
            fixed: 'right',
            slots: {
              default: 'operation'
            }
          }
        ],
        pagerConfig: {
          pageSize: 10
        }
      }
    })
    onMounted(() => {
      bus.on('refreshQzylotteryList', () => {
        nextTick(() => {
          tableRef.value.refresh()
        })
      })
    })
    const router = useRouter()
    function handleCheck(id) {
      router.push({ name: 'QzyUserPhoto', query: { id: id } })
    }
    //删除
    function handleDelete(id) {
      deleteVisible.value = true
    }
    function handleDeleteOk() {
      deleteVisible.value = false
    }
    function handleCreate() {
      router.push({ name: 'QzyCommunityEdit' })
    }
    return {
      tableRef,
      deleteVisible,
      tableConfig,
      handleCreate,
      handleDelete,
      handleDeleteOk,
      handleCheck
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            toolbarButtons: () => {
              return (
                <Space>
                  <Button
                    style={{
                      width: '100px',
                      marginBottom: '10px'
                    }}
                    type="primary"
                    onClick={this.handleCreate}
                  >
                    新增
                  </Button>
                </Space>
              )
            },
            avatar: ({ row }) => {
              return (
                <div
                  style={{
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}
                >
                  <Image
                    src={row.avatar}
                    style={{ width: '60px', height: '60px' }}
                  />
                  <div style={{ marginLeft: '10px' }}>
                    <span>{row.nickname}</span>
                  </div>
                </div>
              )
            },
            operation: ({ row }) => (
              <div>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDelete(row.id)}
                >
                  删除
                </Button>
              </div>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.deleteVisible}
          title="删除"
          destroyOnClose
          onOk={this.handleDeleteOk}
          width={350}
        >
          确定删除该项吗？
        </Modal>
      </div>
    )
  }
})
